<template>
	<view>
		<view class="pr top">
			<image src="/static/image/bg.png" mode="widthFix" class="pa bg"></image>
			<view class="pa balance">
				积分余额
			</view>
			<view class="pa record">
				兑换记录
			</view>
			<view class="pa points">
				{{integral}}
			</view>
			<view class="pa tips">
				积分可兑换商品
			</view>
		</view>
		<view class="line2"></view>
		<view class="detail">
			<u-collapse accordion>
				<u-collapse-item title="积分明细" name="Docs guide">
					<scroll-view @scrolltolower="handleScrollToLower" class="ul" scroll-y :lower-threshold="300">
						<view class="li dis aic jcsa" v-for="(item,index) in tabList" :key="index">
							<view class="remark">{{item.remark}}</view>
							<view class="time">{{item.createTime | formatDateTime}}</view>
							<view>积分{{item.amount > 0 ? '+' : ''}}{{item.amount}}</view>
						</view>
					</scroll-view>
				</u-collapse-item>
				<u-collapse-item title="积分玩法" name="Docs guide">
					<view class="play">
						<view class="dis aic li">
							<view class="title">每日签到</view>
							<view class="value">积分+1</view>
						</view>
					</view>
					<view class="play">
						<view class="dis aic li">
							<view class="title">每日发帖</view>
							<view class="value">积分+1（最多+2积分，仅限校源情报帖子）</view>
						</view>
					</view>
					<view class="play">
						<view class="dis aic li">
							<view class="title">发动态</view>
							<view class="value">积分+2（最多+2积分,仅限发现页面）</view>
						</view>
					</view>
					<view class="play">
						<view class="dis aic li">
							<view class="title">发求助</view>
							<view class="value">积分+2（最多+2积分）</view>
						</view>
					</view>
					<view class="play">
						<view class="dis aic li">
							<view class="title">接求助单</view>
							<view class="value">积分+2（最多+2积分）</view>
						</view>
					</view>
					<view class="play">
						<view class="dis aic li">
							<view class="title">团购或商品</view>
							<view class="value">积分+5（最多+10积分）</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="points_shop" @click="goPointsShop">
			兑换商品
		</view>
	</view>
</template>

<script>
	import {
		getMemberInfo,
		memberPoints
	} from '@/api.js'
	export default {
		data() {
			return {
				integral: 0,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tabList: []
			}
		},
		onShow() {
			this.init()
		},
		filters: {
			formatDateTime(value) {
				if (!value) return '';
				return value.substring(0, 10);

			}
		},
		methods: {
			goPointsShop() {
				uni.navigateTo({
					url: '/pages/shop/pointsShop'
				})
			},
			init() {
				this.getUserDetail()
				this.getMemberPoints()
			},

			async getUserDetail() {
				let res = await getMemberInfo()
				if (res.code == 200) {
					this.integral = res.result.integral
				}

			},
			handleScrollToLower() {
				let pageNo = this.pageNo
				let pageSize = this.pageSize
				let total = this.total
				console.log('一共' + total + '条，当前已经加载' + pageSize * pageNo + '条');
				if (total <= pageNo * pageSize) {
					console.log('已经到底了');
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.pageNo++;
				this.getMemberPoints();
				uni.hideLoading();
			},
			async getMemberPoints() {
				let res = await memberPoints({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				})
				if (res.code == 200) {
					this.total = res.result.total
					this.tabList = this.tabList.concat(res.result.records)
				}
			},




		}
	}
</script>

<style scoped lang="scss">
	.play {
		.li {
			width: 660rpx;
			height: 70rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.title {
				width: 160rpx;
				height: 70rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #E3E3E3;
				font-family: Noto Sans SC, Noto Sans SC;
				font-weight: 400;
				font-size: 21rpx;
				color: #999999;
				line-height: 70rpx;
				text-align: center;
			}

			.value {
				width: 510rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #E3E3E3;
				font-family: Noto Sans SC, Noto Sans SC;
				font-weight: 400;
				font-size: 21rpx;
				color: #666666;
				padding-left: 40rpx;
			}
		}
	}

	.top {
		width: 660rpx;
		height: 230rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 30rpx auto;
		border-top: 1rpx #fff;

		.bg {
			top: 0;
			left: 0;
			width: 660rpx;
			height: 230rpx;
		}

		.balance {
			top: 50rpx;
			left: 38rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #FFFFFF;
		}

		.record {
			width: 148rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0.38);
			border-radius: 37rpx 0rpx 0rpx 34rpx;
			right: 0;
			top: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.points {
			top: 116rpx;
			left: 45rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 46rpx;
			color: #FFFFFF;
		}

		.tips {
			right: 18rpx;
			bottom: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #FFFFFF;
		}
	}

	.detail {
		width: 750rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.ul {
			height: auto;
			max-height: 700rpx;
			overflow-y: scroll;
			padding: 0rpx 0;

			.li {
				margin-bottom: 40rpx;
				border-bottom: 1rpx solid #ccc;
				padding: 10rpx 0;

				.remark {
					width: 300rpx;
				}

				.time {}
			}
		}
	}

	.points_shop {
		position: fixed;
		bottom: 50rpx;
		left: 50rpx;
		width: 650rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(91deg, #E5C795 0%, #FFDFAC 100%);
		border-radius: 77rpx 77rpx 77rpx 77rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
	}
</style>